<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字样式</title>
    <style type="text/css">
        h1{font-family: "Times New Roman"}
        p{font-family: "微软雅黑","黑体",sans-serif}
        .xxlarge{font-size: 20px}
        .em{font-size: 2em}
        .percent{font-size: 150%}
        /*p{color: rgb(0,0,255)}!*数字：0-255；百分比：0%-100%*!*/
        h1{color: #008800}/*十六进制：#开头，六位，0-F*/
        .normal{font-weight: normal}
        .bold{font-weight: bold}
        .bolder{font-weight: bolder}
        .lighter{font-weight: lighter}
        .f100{font-weight: 100;}
        .f200{font-weight: 200;}
        .f300{font-weight: 300;}
        .f400{font-weight: 400;}
        .f500{font-weight: 500;}
        .f600{font-weight: 600;}
        .f700{font-weight: 700;}
        .f800{font-weight: 800;}
        .f900{font-weight: 900;}
        .normal2{font-style: normal}
        .italic{font-style: italic}
        .oblique{font-style: oblique}
        .fontVariant{font-variant: small-caps;}
        .text1{text-align: center}
        .text1 p{width: 50%;margin: auto;}
        .text1{color: red}
        .text2{text-align: justify}
        .sub{vertical-align: sub;}
        .super{vertical-align: super;}
        .bott{vertical-align: -15px}
        .bott{vertical-align: 100%}
    </style>
</head>
<body>
    <h1>浮生取义</h1>
    <p class="xxlarge"> 过日子就是料理家务。
        虽然<span class="percent">人们</span>不在认为需要用祭祀和<span class="em">传宗接代</span>来延续自己的生命，
        但父子一体，夫妻一体仍然是最基本的观念。</p>
    <div class="text1">
        <p> 过日子就是料理家务。虽然人们不在认为需要用祭祀和传宗接代来延续自己的生命，但父子一体，夫妻一体仍然是最基本的观念。</p>
    </div>
    <p class="text2"> 过日子就是料理家务。
        虽然<span class="percent">人们</span>不在认为需要用祭祀和<span class="em">传宗接代</span>来延续自己的生命，
        但父子一体，夫妻一体仍然是最基本的观念。</p>
    <p class="text3"> 过日子就是料理家务。
        虽然<span class="percent">人们</span>不在认为需要用祭祀和<span class="em">传宗接代</span>来延续自己的生命，
        但父子一体，夫妻一体仍然是最基本的观念。</p>
    <p class="normal">字体粗细</p>
    <p class="bolder">字体粗细</p>
    <p class="bold">字体粗细</p>
    <p class="lighter">字体粗细</p>
    <p class="f100">字体粗细</p>
    <p class="f200">字体粗细</p>
    <p class="f300">字体粗细</p>
    <p class="f400">字体粗细</p>
    <p class="f500">字体粗细</p>
    <p class="f600">字体粗细</p>
    <p class="f700">字体粗细</p>
    <p class="f800">字体粗细</p>
    <p class="f900">字体粗细</p>
    <p class="normal2">正常的字体</p>
    <p class="italic">斜体</p>
    <p class="oblique">倾斜</p>
    <p class="fontVariant">small-caps</p>
    <p>css层叠样式表<span class="sub">sub</span></p>
    <p>css层叠样式表<span class="super">super</span></p>
    <p>css层叠样式表<span class="bott">-15px</span></p>
    <p style="letter-spacing: 1.5em">css层叠样式表<span class="bott2">100%</span></p>

</body>
</html>